<template>
  <view class="conten">
    <top-tabbar tabTitle="系统课" :titleStatus="tabHeader" :class="tabHeader ? '' : 'tabHeaderBack'"  @click="backClick"></top-tabbar>
    <!-- 体验课与试听课 -->
    <view class="audition">
      <view class="experience">
         <view style="margin-top:-2rpx" class="systemImg" v-for="(item,index) in courseList" :key="index">
           <image :src="item.imgUrl" mode="widthFix"></image>
         </view>
         <view style="height: 120rpx;"></view>
      </view>
      <view class="footer">
         <view class="btnget" @click="promptlyGet">立即领取</view>
      </view>
        <!-- 绑定手机手机号码弹窗 -->
      <!-- <binding ref="didntbuy" @affirmBtn="boundPhone"></binding> -->
        <!-- 提示输入手机号码弹窗 -->
  <!--    <uni-popup ref="popupphone" type="center" @change="phoneChange">
        <view class="popup-phone-box">
         <view class="popuo-phone-main">
           <view class="hint-title">请输入手机号码：</view>
           <input class="phone-input" v-model="fromPary.phone" type="digit" :maxlength="11"/>
           <view class="btn-primary" @click="phoneClick">立即领取</view>
           <view class="close" @click="$refs.popupphone.close()">关闭</view>
         </view>
        </view>
      </uni-popup> -->
        <!-- 挽留弹窗 -->
      <!-- <detaim-loding ref="detaimPopup" @affirmClick="openOrder"></detaim-loding> -->
        <!-- 定位顶部添加老师的狗皮膏药 -->
<!--      <view class="position-top">
         <view class="add-teacher" :class="topTeacherStatus ? 'teacher-animation' : 'begin-anima'">
            <view class="teacher-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/teacher.png"></image></view>
            <view class="text-conter">您还没有加专属辅导员哦，添加后可享受一对一专业辅导，学习效果加倍~</view>
            <view class="ben-add" @click="jumpApplet">
              <view class="go-addNmae">去添加</view>
              <view class="iconfont">&#xe6ab;</view>
              <launch-weapp v-if="$wechat.isWechat()" :wxPath="wxPath"></launch-weapp>
            </view>
          </view>
         <view class="animation-circle" v-if="topTeacherStatus" @click="clickBall ">
           <view class="img-box">
             <image style="border-radius: 50%;" mode="aspectFill" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/teacher.png"></image>
           </view>
         </view>
        </view> -->
    </view>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import { squeezePage, buyClass } from '@/utils/api.js'
  import detaimLoding from '@/components/loding/detaimLoding.vue'
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
  import luoButton from '../../components/botton/luo-botton.vue'
  import binding from '@/components/loding/binding.vue' // 绑定弹窗组件
  import launchWeapp from '@/components/subscribe/launchWeapp.vue' // 跳小程序组件
  export default {
    components: { 
      topTabbar, 
      detaimLoding, 
      easyLoadimage,
      luoButton,
      binding,
      launchWeapp
    },
  	data() {
  		return {
        tabHeader: true, // 顶部标题状态
        wxPath: 'pages/add_account/system', // 跳小程序地址---默认是什么都没买的地址
        topTeacherStatus: false, // 顶部添加老师的横幅显示与隐藏
        scrollTop:0, // 懒加载需要的高度
        courseId:'444e80df-20f1-17d2-7d5a-3a0016483644', // 系统课id:444e80df-20f1-17d2-7d5a-3a0016483644 // 体验课id：a368d592-3f65-b9af-04ac-3a00150f4e72，
        fromPary: { // 回显的参数
         phone:'', // 手机号码
         logoImageUrl:'', // 商品图片
         platform: '',
         radid: '',
         rsid:'',
         skuid: ''
        },
        regPhone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, // 手机正则
        courseList: [ // 课程数据
          { id: 1, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosSystem/iosSystem1.jpg'},
          { id: 2, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosSystem/iosSystem2.jpg'},
          { id: 3, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosSystem/iosSystem3.jpg'},
          { id: 4, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosSystem/iosSystem4.jpg'},
          { id: 5, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosSystem/iosSystem5.jpg'},
          { id: 6, imgUrl:'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/ios/iosSystem/iosSystem6.jpg'}
        ], 
      }
    },
    onPageScroll({scrollTop}) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
      if(scrollTop < 50) {
         this.tabHeader = true
      }
      if(scrollTop> 50){
        this.tabHeader = false
      }
      // 大于100添加老师文案滑出
      if (scrollTop > 100) {
         this.topTeacherStatus = true
      }
    },
    onLoad(params) {
      const vm = this
      if(params.platform) {
        let platform = params.platform.toLowerCase() // 转小写
        vm.fromPary.platform = platform
      }
      if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
      }
       vm.$wechat.unseBehavior()
    },
    methods:{ 
      // 返回上一页
      backClick() {
        uni.navigateBack({})
      },
    /* 立即领取+跳支付+打开绑定弹窗
     如果是微信环境，判断有没有openId,没有就要授权获取
      如果知道电话号码，说明绑定过，直接跳支付
    */
     promptlyGet() {
       const vm = this
        uni.navigateTo({
          url: '/pages/my/order/iosPayment?phone='+vm.fromPary.phone+'&skuid='+vm.courseId+'&platform='+vm.fromPary.platform
        }) 
     },
      // 点击老师图片滑出按钮与文案
      clickBall() {
        this.topTeacherStatus = false
      },
      // 跳小程序
      jumpApplet() {
        window.location.href = 'weixin://dl/business/?t=gBX7jORYXvt'
      },
      // 立即体验-关闭体验弹窗
      // openOrder() {
      //   const vm = this
      //   vm.$refs.detaimPopup.getPopupConcal() // 关闭挽留弹窗
      //   let phone = uni.getStorageSync('phoneNumber')
      //   uni.navigateTo({ // 跳支付页
      //     url: '/pages/my/order/payment?phone='+phone+'&skuid='+vm.courseId
      //   }) 
      // },
      // 支付弹窗change事件
      // 手机号码弹窗chage事件
      phoneChange(e) {
         const vm = this
        if(!e.show){
          vm.fromPary.phone = ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  image{
    width: 100%;
    height: 100%;
    vertical-align:bottom;
  }
  /deep/ .top-tabbar-wrap{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #FFFFFF;
  }
  .tabHeaderBack{
    background: rgba(0,0,0,0.3);
  }
  .audition{
    margin-top: 176rpx;
    .experience{
      // 系统课定位
      .systemImg{
        width: 100%;
        height: 1334rpx;
      }
      /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
      /deep/ .loading-img{
        height: 500rpx;
      }
    }
  }
  .footer{
    width: 750rpx;
    height: 120rpx;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
    -moz-backdrop-filter: blur(20rpx);
    -ms-backdrop-filter: blur(20rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: env(safe-area-inset-bottom);
    .btnget{
       width: 680rpx;
       padding: 6rpx 0;
       border-radius: 44rpx;
       font-weight: bold;
       background: #FF2A2A;
       text-align: center;
       color: #FFFFFF;
       font-weight: bold;
       font-size: 48rpx;
       color: #FFFFFF;
       animation-fill-mode: both;
       animation: btnget 1s infinite 1s;
       letter-spacing: 0.2em;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.97,0.97);}        
        100% { transform: scale(1,1);}
      }
  }
  // 提示手机号码弹窗
  .popup-phone-box{
    width: 670rpx;
    height: 472rpx;
    background: #FFFFFF;
    border-radius: 40rpx;
    .popuo-phone-main{
      padding: 70rpx 48rpx 56rpx 48rpx;
      .hint-title{
        font-size: 32rpx;
        color: #FF800C;
      }
      .phone-input{
        width: 100%;
        height: 72rpx;
        border: 2rpx solid  #FFDAB9;
        border-radius: 36rpx;
        margin: 46rpx 0 76rpx 0;
        padding-left: 48rpx;
        box-sizing: border-box;
        color: #FF800C;
        font-weight: bold;
        font-size: 32rpx;
      }
      .btn-primary{
        width: 100%;
        padding: 16rpx 0;
        background: #FF800C;
        text-align: center;
        margin: auto;
        font-size: 28rpx;
        letter-spacing: 4rpx;
        border-radius: 36rpx;
        font-weight: bold;
        color: #FFFFFF;
      } 
        .close{
          font-size: 20rpx;
          text-align: center;
          color: #8C8C8C;
          margin-top: 16rpx;
        }
    }
  }
  // 定位顶部老师的狗皮膏药
  .position-top{
     position: fixed;
     left: 0;
     right: 0;
     top: 88rpx;
     // margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
    .teacher-animation{
      animation-fill-mode: both;
      animation: teacher-animation 2s forwards 0.1s;
    }
    .begin-anima{
      animation-name: begin-anima;
      -webkit-animation-name: begin-anima;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      animation-timing-function: ease-in-out;
      -webkit-animation-timing-function: ease-in-out;
      visibility: visible !important;
      animation-fill-mode: forwards;
    }
    @keyframes teacher-animation {
       0% { 
         -webkit-transform: translate(0);
         -moz-transform: translate(0);
         -ms-transform: translate(0);
         transform: translate(0);
         opacity: 1;
         }
       100% { 
         -webkit-transform: translate(120%);
         -moz-transform: translate(120%);
         -ms-transform: translate(120%);
         transform: translate(120%);
         opacity: 0;
       }
     }
     @keyframes begin-anima {
        0% { 
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -ms-transform: translateX(100%);
          transform: translateX(100%);
          opacity: 0;
          }
        100% { 
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          transform: translateX(0);
          opacity: 1;
          }
      }
    .add-teacher{
      width: 670rpx;
      height: 72rpx;
      background: rgba(0,0,0,0.4);
      backdrop-filter: blur(12rpx);
      border-radius: 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .teacher-img{
        width: 72rpx;
        height: 72rpx;
        position: absolute;
        top: 0rpx;
        left: 0rpx;
      }
      .text-conter{
        font-size: 20rpx;
        margin-left: 94rpx;
        width: 58%;
        color:#FFFFFF;
      }
      .ben-add{
        width: 158rpx;
        height: 72rpx;
        background: #FF800C;
        color: #FFFFFF;
        border-radius: 0px 36rpx 36rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .go-addNmae{
          font-weight: 500;
          font-size: 28rpx;
          margin-bottom: 5rpx;
        }
      }
    }
    .animation-circle{
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 38rpx 0px 0px 38rpx;
      z-index: 99;
      display: flex;
      align-items: center;
      .img-box{
        width: 72rpx;
        height: 72rpx;
        margin-left: 5rpx;
      }
    }
  }
</style>


